import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { itemImageDefaultProps } from './defaultProps';
import type { ItemImageOptions } from './type';

export interface ItemImageProps extends ItemImageOptions, HTMLAttributes<HTMLDivElement> {}

const ItemImage: FC<ItemImageProps> = (props) => {
  const { className, as, size, src, forwardedRef, ...itemImageProps } = props;

  return createElement(
    as!,
    { ref: forwardedRef, className: classNames({ ui: size }, size, 'image', className), ...itemImageProps },
    createElement('img', { src }),
  );
};

ItemImage.displayName = 'ItemImage';
ItemImage.defaultProps = itemImageDefaultProps;

export default ItemImage;
